@-webkit-keyframes flipSwingZIn {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
            transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -webkit-transform-origin:center center;
            transform-origin:center center;
            opacity:0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
            transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
    -webkit-transform-origin:center center;
            transform-origin:center center;
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
            transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
    -webkit-transform-origin:center center;
            transform-origin:center center;
  }
  100% {
    -webkit-transform: perspective(400px) rotate(0);
            transform: perspective(400px) rotate(0);
     -webkit-transform-origin:center center;
            transform-origin:center center;
            opacity: 1;
  }
}
@keyframes flipSwingZIn {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -moz-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -ms-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
        transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
       -moz-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
        -ms-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
            transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
    -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            transform-origin:center center;
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
       -moz-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
        -ms-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
            transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
    -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            transform-origin:center center;
  }
  100% {
    -webkit-transform: perspective(400px) rotate(0);
       -moz-transform: perspective(400px) rotate(0);
        -ms-transform: perspective(400px) rotate(0);
            transform: perspective(400px) rotate(0);
     -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            opacity: 1;
  }
}
@-webkit-keyframes flipSwingZOut {
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
            transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -webkit-transform-origin:center center;
            transform-origin:center center;
            opacity:0;
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
            transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
    -webkit-transform-origin:center center;
            transform-origin:center center;
  }
  40% {
      -webkit-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
      transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
      -webkit-transform-origin: center center;
  } 
  0% {
    -webkit-transform: perspective(400px) rotate(0);
            transform: perspective(400px) rotate(0);
     -webkit-transform-origin:center center;
            transform-origin:center center;
            opacity: 1;
  }
}
@keyframes flipSwingZOut {
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -moz-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -ms-transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
        transform: perspective(400px) rotateY(90deg) rotateZ(90deg);
    -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            opacity: 0;
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
       -moz-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
        -ms-transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
            transform: perspective(400px) rotateY(-10deg) rotateZ(-10deg);
    -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            transform-origin:center center;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
       -moz-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
        -ms-transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
            transform: perspective(400px) rotateY(10deg) rotateZ(10deg);
    -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            transform-origin:center center;
  }
  0% {
    -webkit-transform: perspective(400px) rotate(0);
       -moz-transform: perspective(400px) rotate(0);
        -ms-transform: perspective(400px) rotate(0);
            transform: perspective(400px) rotate(0);
     -webkit-transform-origin:center center;
       -moz-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
            opacity: 1;
  }
}